<template>
  <el-icon class="collapse-icon" @click="changeCollapse">
    <component :is="globalStore.isCollapse ? 'expand' : 'fold'"></component>
  </el-icon>
</template>

<script setup lang="ts">
import { computed } from "vue";
// import { useGlobalStore } from "@/stores/modules/global";
import { useStore } from 'vuex'
const store = useStore()
const globalStore = computed(() => store.state.layouts.globalState)
// const globalStore = useGlobalStore();
const changeCollapse = () => {
  store.dispatch('layouts/setGlobalState', { "isCollapse": !globalStore.value.isCollapse })
  // globalStore.setGlobalState("isCollapse", !globalStore.isCollapse)
  };
</script>

<style scoped lang="scss">
.collapse-icon {
  margin-right: 20px;
  font-size: 22px;
  color: var(--el-header-text-color);
  cursor: pointer;
}
</style>
